<template>
	<view>
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">
					<navigator style="display: flex;align-items: center;justify-content: center;" open-type="navigateBack" delta='1'><image  src="../../../static/images/backnav.png" mode=""></image></navigator><text>我的兑换码</text>
					</view>
				<!-- #endif -->
				<view class="bg"></view>
			</view>
			<!-- #endif -->
		</view>
		<view class="">
			 <view class="navbar acea-row row-around">
			 	<view class="item acea-row row-center-wrapper" :class="{ on: status === 0}" @click="onNav(0)">未使用</view>
			 	<view class="item acea-row row-center-wrapper" :class="{ on: status === 1 }" @click="onNav(1)">已使用</view>
			 	<view class="item acea-row row-center-wrapper" :class="{ on: status === -1 }" @click="onNav(-1)">快过期</view>
			 	<view class="item acea-row row-center-wrapper" :class="{ on: status === 10 }" @click="onNav(10)">已过期</view>
			 </view>
			 <scroll-view scroll-y="true" :style="{height:scrollBoxHeight}" id="scrollBox" >
			 	<!-- <view class='coupon-list' v-if="codemalist.length">
			 		123
			 	</view> -->
				<view class='codemabox' v-for="(item,index) of codemalist" :key="index">
					<view class="codemaid">
						兑换券号：{{item.code}}
					</view>
					<view class="codemause">
						<view class="codematag">
							可兑换:{{item.goods_name}}
						</view>
						<view class="codemause" @click="jumpprodui(item)" :data-index="index" v-if="item.status == 0">
							去使用
						</view>
						<view class="codemause" v-if="item.status == 1">已使用</view>
						<view class="codemause" v-if="item.status == 10">已过期</view>
					</view>
					<view class="codeyxq">
						有效期：{{item.sdate}} 至{{item.edate}}
					</view>
				</view>
				<!-- v-if="!codemalist.length && page === 2" -->
			 	<view class='noCommodity'v-if="!codemalist.length" >
			 		<view class='pictrue'>
			 			<image src='../../../static/images/no-thing.png'></image>
						<view class="" style="font-size:25rpx;text-align: center;">
							暂无此类兑换码~
						</view>
			 		</view>
			 	</view>
			 </scroll-view>
			 
		</view>
		
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- <home></home> -->
		
		<view class="adddhmbtn" @click="jumpduihuan">
			<!-- <image src="../static/1.png" mode=""></image> -->
			<view class="addimg">
				+
			</view>
			<text>添加兑换码</text>
		</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getUserCoupons
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {code_check_active, code_exList} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		data() {
			return {
				couponsList: [],
				codemalist: [],
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				page: 1,
				limit: 15,
				finished: false,
				sysHeight: sysHeight,
				scrollBoxHeight:0,
				status:0, //参数：status 0未使用 1 已使用 -1 快过期（7天） 10 已过期
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getcodemalist();
					}
				},
				deep: true
			}
		},
		onShow() {
			console.log("show",this.isLogin)
			uni.setNavigationBarColor({
				 frontColor: '#ffffff',
				 backgroundColor: '#C7ED67'
			})
			if (this.isLogin) {
				this.getcodemalist();
			} else {
				toLogin();
			}
		},
		onReady() {
			let self = this
			// #ifdef MP
			let info = uni.createSelectorQuery().select(".sys-head");
			info.boundingClientRect(function(data) { //data - 各种参数
				self.mpHeight = data.height
			}).exec()
			// #endif
			
			var systemHeight = uni.getSystemInfoSync().windowHeight
			uni.createSelectorQuery().select('#scrollBox').boundingClientRect((rect) => {
				var top = systemHeight - rect.top
				this.scrollBoxHeight = top + 'px'
			}).exec()
		},
		onReachBottom() {
			this.getUseCoupons();
		},
		methods: {
			jumpduihuan(){
				uni.navigateTo({
					url:'../duihuanmasure/index'
				})
			},
			jumpprodui(item){
				let id = item.goods_ids,
					exchangeId = item.id;
					
				uni.navigateTo({
					url: `/pages/users/exchange_goods_details/exchange_goods_details?id=${id}&exchangeId=${exchangeId}`
				});
			},
			onNav: function(type) {
				this.status = type;
				this.codemalist = [];
				this.finished = false;
				// this.status = type
				this.getcodemalist();
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.getcodemalist();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 获取兑换码列表
			async getcodemalist(){
				let that = this;
				var sendData = {
					status:this.status
				}
				
				// if (that.loading || that.finished) {
				// 	return;
				// }
				// that.loading = true;
					uni.showLoading({
						title: '正在加载…'
					});
					var res = await code_exList(sendData)
					console.log(res,'返回兑换码列表数据')
					this.codemalist = res.data
					// that.loading = false;
				    uni.hideLoading();
					console.log(res,88)
					// that.finished = res.data.length < that.limit;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sys-head {
		position: relative;
		width: 100%;
		// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
	
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("~@/static/images/home_bg.png") no-repeat;
			background-size: 100% 100%;
			background-position: left bottom;
		}
	
		.sys-title {
			z-index: 10;
			position: relative;
			height: 43px;
			text-align: center;
			line-height: 43px;
			font-size: 36rpx;
			color: #FFFFFF;
			display:flex;
			align-items: center;
			image{
				width:45rpx;
				height:38rpx;
				margin-right:18rpx;
				margin-left:30rpx;
			}
		}
	}
	.money {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.pic-num {
		color: #ffffff;
		font-size: 24rpx;
	}

</style>

<style lang="scss" scoped>
	.navbar {
		// position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 106rpx;
		background-color: #FFFFFF;
		z-index: 9;

		.item {
			border-top: 5rpx solid transparent;
			border-bottom: 5rpx solid transparent;
			font-size: 30rpx;
			color: #999999;
             
			&.on {
				border-bottom-color: #ABD15C;
				color: #A3CD4C;
			}
		}
	}
   //兑换码未使用
	.codemabox {
		margin-top: 122rpx;
		width:640rpx;
		min-height:100rpx;
		// background-color:#95C51B;
		margin:auto;
		margin-top:26rpx;
		border-radius:16rpx;
		box-sizing: border-box;
		.codemaid{
			font-weight: 300;
			color: #ffffff;
			font-size: 30rpx;
			background-color:#95C51B;
            padding:0 40rpx;
			box-sizing: border-box;
			padding-top:30rpx;
			padding-bottom:20rpx;
		}
		.codemause{
			display:flex;
			align-items: center;
			justify-content: space-between;
			background-color:#95C51B;
			padding:0 40rpx;
			box-sizing: border-box;
			padding-bottom:20rpx;
			.codematag{
				font-weight: 200;
				color: #fff;
				font-size:26rpx;
			}
			.codemause{
				height: 48rpx;
				line-height:48rpx;
				font-weight: 200;
				color: #ffffff;
				font-size:26rpx;
				border:1px solid #fff;
				text-align:center;
				padding:0 20rpx;
				margin-right:20rpx;
			}
		}
		.codeyxq{
			font-size: 24rpx;
			font-weight: 400;
			color: #aaaaaa;
			padding:26rpx 40rpx;
			box-sizing: border-box;
			box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.12); 
		}
	}

	.noCommodity {
		padding-top: 300rpx;
	}
	
	.adddhmbtn{
		position:fixed;
		bottom:50rpx;
		left:0;
		right:0;
		margin:auto;
		width: 490rpx;
		height: 84rpx;
		background: #95C51B;
		border-radius: 42rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		.addimg{
			width: 31rpx;
			height: 31rpx;
			border-radius:50%;
			border:2rpx solid #fff;
			text-align:center;
			line-height:26rpx;
			color:#fff;
			font-size:30rpx;
			margin-right:10rpx;
		}
		image{
			width: 31rpx;
			height: 31rpx;
			margin-right:10rpx;
		}
		text{
			font-size: 26rpx;
			font-weight: normal;
			color: #FFFFFF;
		}
	}
</style>
